<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        margin: 200px;
      }

      span {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #333;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>

  <body>
    <div>
      <span class="hour"></span>
      <span class="minute"></span>
      <span class="second"></span>
    </div>
    <script>
      // 1.获取元素
      var hour = document.querySelector('.hour') // 小时的黑色盒子
      var minute = document.querySelector('.minute') // 分钟的黑色盒子
      var second = document.querySelector('.second') // 秒数的黑色盒子
      var inputTime = +new Date('2022-8-29 18:00:00') //返回的是用户输入的时间毫秒数
      countDown() //先调用一次这个函数，防止页面空白
      // 2. 开启定时器
      setInterval(countDown, 1000)

      function countDown(time) {
        var nowTime = +new Date() //返回当前时间的毫秒数
        var times = (inputTime - nowTime) / 1000 //time 就是剩余秒数
        var h = parseInt((times / 60 / 60) % 24) //时
        h = h < 10 ? '0' + h : h
        hour.innerHTML = h //把剩余的小时给 小时黑色盒子
        var m = parseInt((times / 60) % 60) //分
        m = m < 10 ? '0' + m : m
        minute.innerHTML = m
        var s = parseInt(times % 60) //当前的秒
        s = s < 10 ? '0' + s : s
        second.innerHTML = s
      }
    </script>
  </body>
</html>
